<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:t="http://myfaces.apache.org/tomahawk">
<!-- <h:head> -->
<!-- 	<h:script type="text/javascript" library="js" name="messageForm.js" /> -->

<!-- </h:head>	 -->
<div id="tabPanelContainer"
	style="margin-top: 100px; min-height: 200px;">

	<h:form id='tabForm'>
		<rich:tabPanel id='tabPanel' switchType="client">
			<c:if test="#{friendBean.newFriends!=null}">
				<rich:tab label="First" id="newFriendsTab">
					<rich:dataTable value="#{friendBean.newFriends}" var="friend">
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Photo" />
								</h:column>
							</f:facet>
							<div style="height: 50px; float: left;">
								<h:form>
									<h:graphicImage id="image" alt="Avatar"
										url="#{friend.avatarPath}" style="height: 50px">
									</h:graphicImage>
								</h:form>

							</div>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Name" />
								</h:column>
							</f:facet>
							<h:link value="#{friend.user.name}" outcome="user">
								<f:param name="user" value="#{friend.user.login}" />
							</h:link>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Sex" />
								</h:column>
							</f:facet>
							<h:outputText value="#{friend.user.sex}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="City" />
								</h:column>
							</f:facet>
							<h:outputText value="#{friend.user.city}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Action" />
								</h:column>
							</f:facet>
							<h:panelGrid columns="1">
								<h:commandLink value="Accept" action="#{friendBean.accept}">
									<f:setPropertyActionListener
										target="#{friendBean.selectedFriend}" value="#{friend.user}" />
								</h:commandLink>

							</h:panelGrid>
						</rich:column>
					</rich:dataTable>
				</rich:tab>
			</c:if>
			<rich:tab label="Second" id="friendsTab">
				<c:if test="#{friendBean.friends!=null}">
					<rich:dataTable value="#{friendBean.friends}" var="friend">
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Photo" />
								</h:column>
							</f:facet>
							<div style="height: 50px; float: left;">
								<h:form>
									<h:graphicImage id="image" alt="Avatar"
										url="#{friend.avatarPath}" style="height: 50px">
									</h:graphicImage>
								</h:form>

							</div>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Name" />
								</h:column>
							</f:facet>
							<h:link value="#{friend.user.name}" outcome="user">
								<f:param name="user" value="#{friend.user.login}" />
							</h:link>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Sex" />
								</h:column>
							</f:facet>
							<h:outputText value="#{friend.user.sex}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="City" />
								</h:column>
							</f:facet>
							<h:outputText value="#{friend.user.city}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:column>
									<h:outputText value="Action" />
								</h:column>
							</f:facet>
							<h:panelGrid columns="2">
								<div onclick="showMessageForm('${friend.user.login}')"
									style="background-color: silver; cursor: pointer; border: 1px black solid; pading: 5px;">Write
									message</div>
								<h:commandLink action="#{friendBean.removeFriend}">Remove from friends
									<f:setPropertyActionListener
										target="#{friendBean.selectedFriend}" value="#{friend.user}" />
								</h:commandLink>
							</h:panelGrid>
						</rich:column>

					</rich:dataTable>
				</c:if>
				<c:if test="${friendBean.friends==null}">
				You haven't friends yet. You can found them <h:link value="here"
						outcome="searchresult" />
				</c:if>
			</rich:tab>
			<rich:tab label="Third" id="messagesTab">
				<f:facet name="header">
					<h:outputText value='Massages' />

					<c:if test="#{msgBean.haveUnreadMessage==true}">
						<h:outputText value='    New ' />
						<h:graphicImage value="img/msg.jpg" />
					</c:if>
				</f:facet>
				<rich:dataTable rowKeyVar="row" id='msgDataTable'
					value="#{msgBean.messages}" var="msg" style="max-height:150px;">
					<rich:column>
						<f:facet name="header">
							<h:column>
								<h:outputText value="From" />
							</h:column>
						</f:facet>
						<h:link value="#{msg.sender.name}" outcome="user">
							<f:param name="user" value="#{msg.sender.login}" />
						</h:link>
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:column>
								<h:outputText value="To" />
							</h:column>
						</f:facet>
						<h:link value="#{msg.receiver.name}" outcome="user">
							<f:param name="user" value="#{msg.receiver.login}" />
						</h:link>
					</rich:column>

					<!--  -->

					<rich:column id='mesCol'>
						<f:facet name="header">
							<h:column>
								<h:outputText value="Message" />
							</h:column>
						</f:facet>
						<h:panelGroup id='panelGroup' rendered="#{msg.isNew == true}">

							<div class='unreadMesages'
								onclick='read("#{msg.message}","#{row}")'>
								Read
								<h:commandLink id='markAsReadLink'
									action="#{msgBean.markAsRead}">
									<f:setPropertyActionListener
										target="#{msgBean.selectedMessage}" value="#{msg}" />
								</h:commandLink>
							</div>
						</h:panelGroup>
						<h:panelGroup rendered="#{msg.isNew == false}">
							<h:outputText value="#{msg.message}" />
						</h:panelGroup>

					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:column>
								<h:outputText value="Time" />
							</h:column>
						</f:facet>
						<h:outputText value="#{msg.time}">
							<f:convertDateTime pattern="HH:mm  dd-MM-yy" />
						</h:outputText>
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:column>
								<h:outputText value="Action" />
							</h:column>
						</f:facet>
						<h:commandLink action="#{msgBean.removeMessage}">Delete message
									<f:setPropertyActionListener
								target="#{msgBean.selectedMessage}" value="#{msg}" />
						</h:commandLink>
					</rich:column>
				</rich:dataTable>
			</rich:tab>



		</rich:tabPanel>

	</h:form>

</div>
</html>